<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	import router from "../../../router";
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const userRole = userStoreInfo.userFlag
	onLoad(() => {
		let year = new Date().getFullYear();
		let month = new Date().getMonth() + 1;
		timeValue.value = `${year}-${month.toString().padStart(2, "0")}`
		console.log(timeValue.value);
		// uni.showLoading({})
		duizhangZongshu()
		dzQuanbu()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	onReachBottom(() => {
		page.value++
		switch (tabsCurrent.value) {
			case 0:
				dzQuanbu()
				break;
			case 1:
				dzShouru()
				break;
			case 2:
				dzZhichu()
				break;
		}
	})
	const routerLink = (e, item) => {
		if (item.inOut == 1) return
		router.push({
			name: e,
			params: {
				data: encodeURIComponent(JSON.stringify(item))
			}
		})
	}
	let tabList = ref([{
		name: '全部',
	}, {
		name: '收入明细',
	}, {
		name: '支出明细',
	}])
	let tabsCurrent = ref(0)
	let timeShow = ref(false)
	let timeValue = ref('')
	let timeNum = ref()
	let nowTime = new Date().getTime();
	console.log(nowTime);
	//fenye
	let page = ref(1)
	let allList = ref([])
	const tabsClick = (e : any) : void => {
		tabsCurrent.value = e.index
		console.log(tabsCurrent.value);
		allList.value = []
		page.value = 1
		switch (tabsCurrent.value) {
			case 0:
				dzQuanbu()
				//全部暂无
				break;
			case 1:
				dzShouru()
				break;
			case 2:
				dzZhichu()
				break;
		}
	}
	const confirmTime = (e) => {
		console.log(e.value);
		timeValue.value = uni.$u.timeFormat(e.value, 'yyyy-mm')
		timeShow.value = false
		allList.value = []
		page.value = 1
		switch (tabsCurrent.value) {
			case 0:
				dzQuanbu()
				break;
			case 1:
				dzShouru()
				break;
			case 2:
				dzZhichu()
				break;
		}
		duizhangZongshu()
	}
	let allNum = ref(null)
	const duizhangZongshu = () => {
		//总数
		proxy.$req('GET', proxy.$api.duizhangZongshu, {
			yearMonth: timeValue.value
		}).then((res) => {
			console.log(res);
			allNum.value = res.result
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 300)
		})
	}
	const dzZhichu = () => {
		//支出
		proxy.$req('GET', proxy.$api.dzZhichu, {
			yearMonth: timeValue.value,
			pageNo: page.value,
			pageSize: 20
		}).then((res) => {
			console.log(res);
			allList.value = allList.value.concat(res.result.records)
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 300)
		})
	}
	const dzQuanbu = () => {
		//全部
		proxy.$req('GET', proxy.$api.dzQuanbu, {
			yearMonth: timeValue.value,
			pageNo: page.value,
			pageSize: 20
		}).then((res) => {
			console.log(res);
			allList.value = allList.value.concat(res.result.records)
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 300)
		})
	}
	const dzShouru = () => {
		//收入
		proxy.$req('GET', proxy.$api.dzShouru, {
			yearMonth: timeValue.value,
			pageNo: page.value,
			pageSize: 20
		}).then((res) => {
			console.log(res);
			allList.value = allList.value.concat(res.result.records)
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 300)
		})
	}
</script>
<template>
	<view class="timeScreen" @click="timeShow=true">
		<text>{{ timeValue }}</text>
		<u-icon name="arrow-down-fill"></u-icon>
	</view>
	<view class="billCard" v-if="allNum!=null">
		<view class="bcl">
			<text class="top">{{ allNum.in }}</text>
			<text class="bottom">收入</text>
		</view>
		<view class="bcr">
			<text class="top">{{ allNum.out }}</text>
			<text class="bottom">支出</text>
		</view>
	</view>
	<view class="tabs">
		<u-tabs :list="tabList" :activeStyle="{
			width:'200rpx',
			textAlign:'center',
	    color: '#CB645E',
	    fontWeight: 'bold',
	    transform: 'scale(1.05)'
	}" :inactiveStyle="{
		textAlign:'center',
		width:'200rpx',
	    color: '#000',
	    transform: 'scale(1)'
	}" lineColor="#CB645E" :current="tabsCurrent" @click="tabsClick"></u-tabs>
	</view>
	<view class="listItem" v-for="(item,index) in allList" :key="index" @click="routerLink('billDetail',item)">
		<view class="itLeft">
			<text
				class="u-line-1">{{ item.inOut==0?item.order3.orderInfoList[0].productName+'....':item.type==0?'供应商商城VIP':item.type==1?'供应商招聘VIP':item.type==2?'供应商认证':item.type==3?'供应商商品保证金':item.type==4?'用户招聘VIP':'短时工' }}</text>
			<text>{{ item.inOut==0?item.payTime:item.payTime }}</text>
		</view>
		<view class="itRight intFont">
			<text>{{ item.inOut==0?'+'+item.payAmount:'-'+item.payAmount}}</text>
			<u-icon name="arrow-right" v-if="item.inOut==0"></u-icon>
		</view>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="allList.length<1">
		<u-empty mode="list">
		</u-empty>
	</view>
	<u-datetime-picker :show="timeShow" v-model="timeNum" :maxDate="nowTime" :minDate="1640972661120" mode="year-month"
		return-type="string" @cancel="timeShow=false" @confirm="confirmTime"></u-datetime-picker>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.timeScreen {
		width: 100%;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.billCard {
		width: 686rpx;
		height: 200rpx;
		margin: 30rpx auto 0;
		display: flex;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.bcl {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.bcr {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.top {
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}

		.bottom {
			font-size: 24rpx;
			color: #909399;
		}
	}

	.tabs {
		width: 100%;
		margin-top: 32rpx;
	}

	.listItem {
		margin: 0 auto;
		width: 686rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e7e7e7;

		.itLeft {
			width: 450rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			text:nth-child(1) {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			text:nth-child(2) {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.itRight {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-weight: 600;
		}
	}
</style>